<!DOCTYPE html>
<html>
  <head>
    <title>js实现思维导图</title>
  </head>
  <link rel="stylesheet" href="./jsMind/style/jsmind.css" />
  <link rel="stylesheet" href="./css/jsMind.css" />
  <link rel="stylesheet" href="./jsMind/style/jsmind.css" />
  <script type="text/javascript" src="./jsMind/js/jsmind.js"></script>
  <script type="text/javascript" src="./jsMind/js/jsmind.draggable.js"></script>
  <script type="text/javascript" src="./jsmind.menu.js/jsmind.menu.js"></script>
  <script
    type="text/javascript"
    src="./jsMind/js/jsmind.screenshot.js"
  ></script>
  <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  <!-- Bootstrap 的 CSS 文件 -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
    integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
    crossorigin="anonymous"
  />
  <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
  <script
    src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
    crossorigin="anonymous"
  ></script>
  <body>
    <div class="jsMindBox">
      <div class="btn_box">
        <button
          id="save_btn"
          type="button"
          class="btn btn-primary"
          style="background-color: #428bca"
        >
          保存
        </button>
      </div>
      <!-- 准备一个容器存放jsMind -->
      <div id="jsmind_container" class="mind_box"></div>
    </div>
  </body>
</html>
<script>
  // 阻止浏览器默认右键事件
  document.oncontextmenu = function () {
    return false;
  };
  // jsMind 的数据
  var mind = {
    /* 元数据，定义思维导图的名称、作者、版本等信息 */
    meta: {
      name: "maoweizhao",
      author: "1016182328@qq.com",
      version: "0.2",
    },
    /* 数据格式声明 */
    format: "node_array",
    /* 数据内容 */
    data: [
      { id: "root", isroot: true, topic: "jsMind" },
      { id: "easy", parentid: "root", topic: "Easy", direction: "left" },
      { id: "easy1", parentid: "easy", topic: "Easy to show" },
      { id: "easy2", parentid: "easy", topic: "Easy to edit" },
      { id: "easy3", parentid: "easy", topic: "Easy to store" },
      { id: "easy4", parentid: "easy", topic: "Easy to embed" },

      {
        id: "open",
        parentid: "root",
        topic: "Open Source",
        expanded: false,
        direction: "right",
      },
      { id: "open1", parentid: "open", topic: "on GitHub" },
      { id: "open2", parentid: "open", topic: "BSD License" },

      {
        id: "powerful",
        parentid: "root",
        topic: "Powerful",
        direction: "right",
      },
      { id: "powerful1", parentid: "powerful", topic: "Base on Javascript" },
      { id: "powerful2", parentid: "powerful", topic: "Base on HTML5" },
      { id: "powerful3", parentid: "powerful", topic: "Depends on you" },
    ],
  };
  // jsMind配置对象
  var options = {
    container: "jsmind_container", //容器的ID
    editable: true, // 是否启用编辑
    theme: "primary", //主题
    mode: "side", // 显示模式========full - 子节点动态分布在根节点两侧 [默认值] side - 子节点只分布在根节点右侧
    support_html: true, // 是否支持节点里的HTML元素
    view: {
      hmargin: 100, // 思维导图距容器外框的最小水平距离
      vmargin: 50, // 思维导图距容器外框的最小垂直距离
      line_width: 2, // 思维导图线条的粗细
      line_color: "#555", // 思维导图线条的颜色
    },
    layout: {
      hspace: 30, // 节点之间的水平间距
      vspace: 20, // 节点之间的垂直间距
      pspace: 13, // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
    },
    shortcut: {
      enable: true, // 是否启用快捷键
      handles: {}, // 命名的快捷键事件处理器
      mapping: {
        // 快捷键映射
        addchild: 45, // <Insert>
        addbrother: 13, // <Enter>
        editnode: 113, // <F2>
        delnode: 46, // <Delete>
        toggle: 32, // <Space>
        left: 37, // <Left>
        up: 38, // <Up>
        right: 39, // <Right>
        down: 40, // <Down>
      },
    },
    // 右键菜单配置
    menuOpts: {
      showMenu: true,
      tipContent: "请选择一个节点进行该操作",
      injectionList: [
        {
          target: "edit",
          text: "编辑节点",
          callback: function (node) {
            console.log(node);
          },
        },
        {
          target: "addChild",
          text: "添加子节点",
          callback: function (node) {
            console.log(node);
          },
        },
        {
          target: "addBrother",
          text: "添加兄弟节点",
          callback: function (node) {
            console.log(node);
          },
        },
        {
          target: "delete",
          text: "删除节点",
          callback: function (node, next) {
            console.log(node);
          },
        },
        // {
        //   target: "screenshot",
        //   text: "下载导图",
        //   callback: function (node, next) {
        //     console.log(node);
        //   },
        // },
        // {
        //   target: "showAll",
        //   text: "展开全部节点",
        //   callback: function (node, next) {
        //     console.log(node);
        //   },
        // },
        // {
        //   target: "hideAll",
        //   text: "收起全部节点",
        //   callback: function (node, next) {
        //     console.log(node);
        //   },
        // },
      ],
    },
  };
  let jm = new jsMind(options); // 传入配置对象，生成jsMind对象实列
  jm.show(mind); // 让 jm 显示这个 mind 即可
  jm.expand_all(); //展开全部节点
  // 保存思维导图数据
  $("#save_btn").click(function () {
    console.log(jm.get_data("node_array"), "思维导图数据");
  });
</script>
